<template>
  <div class="point">
    <div id="mongolia" class="mongolia" @click.stop="creat_point">
      <n-carousel show-arrow :on-update:current-index="hhhh" ref="carousel">
        <!-- {{ paths.value }} -->
        <div v-for="(item, index) in paths" :key="index">
          <img class="carousel-img" :src="item.path" />
        </div>
      </n-carousel>
      <div v-for="(item, index) in markerArr" :key="index" class="marker" :style="{ left: item.x, top: item.y }">
        {{ index + 1 }}
      </div>
      <!-- <div
        v-for="(item, index) in markerArr"
        :key="index"
        class="marker"
        :style="{ left: item.x, top: item.y }"
        @click.stop="del_poit(index)"
      ></div> -->
    </div>
    <div class="ts">
      <div>请按提示标注:</div>
      <div>点【1】：左眼</div>
      <div>点【2】：右眼</div>
      <div>点【3】：鼻子</div>
      <div>点【4】：嘴巴</div>
      <div>点【5】：左耳</div>
      <div>点【6】：右耳</div>
      <n-button class="btn" type="info" @click="change">下一张</n-button>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { userUpload } from '@/api/post'
import { onMounted } from 'vue'
import { searchtaskPhotos } from '@/api/post'
import { createLocalStorage } from '@/utils/cache'
const markerArr = ref([])
const markerArr1 = ref([])
const task_id = ref(123)
const paths = ref([])
const carousel = ref(null)
onMounted(() => {
  const url = location.search //获取url中"?"符后的字串
  const id = url.split('=')[1]
  task_id.value = id
  getPaths(id)
})
const ls = createLocalStorage({ prefixKey: 'login_' })
const user = ls.get('loginInfo')

async function getPaths(id) {
  const res = await searchtaskPhotos({ task_id: id })
  paths.value = res
  // console.log('path=' + paths.value[0].data_file_id)
}
function creat_point(e) {
  e = e || window.event
  let x = e.offsetX || e.layerX
  let y = e.offsetY || e.layerY
  let obj = {
    x: x + 'px',
    y: y + 'px',
  }
  let a = x + 'px' + y + 'px'
  if (x < 400 || y < 350) {
    markerArr.value.push(obj)
    markerArr1.value.push(a)
  }
  console.log(markerArr1.value.length)
  if (markerArr1.value.length == 6) {
    $message.success('标注成功')
  }
  console.log(obj.x)
}
async function upload(data) {
  const res = await userUpload(data)
  console.log('已上传')
  console.log(res)
}
function hhhh(ci, li) {
  console.log('切换图片了——————')
  console.log(ci, li)
  console.log('****************')
  if (markerArr1.value.length == 6) {
    $message.success('标注成功！')
    const data = {
      data_file_id: paths.value[li].data_file_id,
      task_id: task_id.value,
      userid: user.userid,
      path: null,
      width: null,
      height: null,
      left_eye: markerArr1.value[0],
      right_eye: markerArr1.value[1],
      nose: markerArr1.value[2],
      mouth: markerArr1.value[3],
      left_ear: markerArr1.value[4],
      right_ear: markerArr1.value[5],
    }
    console.log('data是' + data.nose)
    upload(data)
    markerArr.value = []
    markerArr1.value = []
  } else {
    $message.error('标注未完成！')
  }
}
function change() {
  markerArr.value = []
  markerArr1.value = []
  carousel.value.to(1)
}
// 删除点
function del_poit(index) {
  markerArr.value.splice(index, 1)
}
</script>
<style scoped>
.point {
  display: flex;
  margin-left: 200px;
  margin-top: 80px;
  width: 800px;
  height: 400px;
}
.mongolia {
  width: 500px;
  margin-right: 10%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: relative;
}
.marker {
  width: 10px;
  height: 10px;
  position: absolute;
  background: red;
}
</style>
